import React from 'react';
import ReactEcharts from 'echarts-for-react';

let data = [];
for ( let i = 0 ; i < 24 ; i++){
    data.push({ date:`${ i < 10 ? '0' + i : i}:00`, status:i < 6 ? 'closed' : i === 20 ? 'error' : 'normal', value:200 + Math.round(Math.random() * 50), sameRatio:200 + Math.round(Math.random() * 50), adjoinRatio:200 + Math.round(Math.random() * 50) });
}
let valueSeries = [
    { valueData:data[0].adjoinRatio }
];
function CustomGaugeChart({ min, max, forCOP, title, legend, data }){
    const seriesData = [];
    // 外层仪表盘
    seriesData.push({
        type:'gauge',
        name:'负载率',
        min,
        max,
        center:['38%','56%'],
        radius:'70%',
        progress:{
            show:true,
            width:22
        },
        itemStyle:{ color: forCOP ? '#f7ddb4' : '#b7d1f5' },
        axisLine:{
            lineStyle:{
                width:22,
                color:[[1, forCOP ? '#f4ecde' : '#dce7f2']]
            }
        },
        axisLabel:{
            distance:-42,
            color:'#999',
            fontSize:12,
            formatter:value=>{
                if ( forCOP ) {
                    return value === min ? '{red|需改进}' : value === max/2 ? '{orange|良好}' : value === max ? '{green|优秀}' : ''; 
                } else {
                    return value === min || value === max || value === max/2 ? value + '%' : '';
                }
            },
            rich:{
                red:{ color:'#f64c4c' },
                orange:{ color:'#ffa855'},
                green:{ color:'#1cbc41' }
            }
        },
        pointer:{ show:false },
        axisTick:{ show:false },
        splitLine:{ show:false },
        
        data:[{ value:data }]
    });
    // 内层仪表盘
    seriesData.push({
        type:'gauge',
        min,
        max,
        center:['38%','56%'],
        radius:'60%',
        progress:{
            show:true,
            width:8
        },
        itemStyle:{
            color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[
                    { offset:0, color:forCOP ? '#ff840f' : '#457dff' },
                    { offset:1, color:'#fff' }
                ]
            }
        },
        axisLine:{
            show:false
        },
        axisLabel:{ show:false },
        pointer:{ show:false },
        axisTick:{ show:false },
        splitLine:{ show:false },
        data:[{ value:data }],
        detail:{
            offsetCenter:[0,10],
            formatter:value=>{
                return `{value|${value}${ forCOP ? '' : '%'}}\n{text|当前主机${title}}`;
            },
            rich:{
                value:{
                    color:forCOP ? '#ff840f' : '#457dff',
                    fontSize:30,
                    lineHeight:30,
                    fontWeight:'bold'
                },
                text:{
                    fonSize:14,
                    color:'#b7b7b8'
                }
            }
        },
        zlevel:10
    });
    // 阴影层
    seriesData.push({
        type:'gauge',
        min,
        max,
        center:['38%','56%'],
        radius:'60%',
        startAngle:0,
        endAngle:360,
        itemStyle:{ color:'#b4cff2' },
        axisLine:{
            lineStyle:{
                width:100,
                color:[[1, '#fff']],
                shadowColor:'#dedede',
                shadowBlur:20,
                shadowOffsetY:20
            }
        },
        axisLabel:{ show:false },
        pointer:{ show:false },
        axisTick:{ show:false },
        splitLine:{ show:false },
        
    });
    return (
        <div style={{ height:'100%', position:'relative' }}>
            <div style={{ position:'absolute', left:'70%', top:'50%', transform:'translateY(-50%)' }}>
                {
                    legend.map((item, index)=>(
                        <div key={index} style={{ margin:'2rem 0' }}>
                            <div>{ item.label }</div>
                            <div style={{ color:'#1c1c1c', fontSize:'2rem', lineHeight:'2rem', fontWeight:'bold' }}>{ item.value + item.unit }</div>
                        </div>
                    ))
                }
            </div>
            <ReactEcharts
                notMerge={true}
                style={{ height: '100%' }}
                option={{
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: 14,
                        },
                        left: 20,
                        top: 10,
                    },
                    series:seriesData
                }}
            />
        </div>
    )
}

export default CustomGaugeChart;